<template>
	<!-- 绑定公众号 和	我的返利组件 -->
	<view class="customers">
		<!-- 时间查询 -->
		<view class="time">
			<view class="date" @tap="show=true">
				<u--input :value="formatParamTime(params.date, 'date')" disabled></u--input>
			</view>
			<u-button class="button" color="#007aff" @click="params.page=1,tableData=[],getData()">查询</u-button>
		</view>
		<!-- 表格 -->
		<nt-table :style="{height:tableHeight+'px'}" :value="loading" @input="getLoadValue" :finished="false"
			@scrolltolower="getData" class="table" :columns="columns" :table-data="tableData">
			<template slot="money" slot-scope="{rows,index}">
				<text style="color: red;"> {{rows.money}}</text>
			</template></nt-table>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="show" v-model="params.date" mode="year-month" title="日期选择" @close="show = false"
			@cancel="show = false" @confirm="confirmDate" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getUserList
	} from '@/api'
	export default {
		props: {
			url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: false,
				loading: false,
				tableData: [],
				columns: [],
				params: {
					page: 1,
					limit: 20,
					date: ''
				},
				tableHeight: 100,
				nextRequest: true
			}
		},
		created() {
			// 设置年月
			this.getYearMonth()
		},
		methods: {
			getYearMonth() {
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month < 10 ? month = `0${month}` : month
				this.params.date = this.formatParamTime(`${year}-${month}-01`, 'year-month')
			},
			confirmDate(e) {
				this.params.date = e.value
				this.show = false
				this.tableData = []
				this.nextRequest=true
				this.params.page = 1
				this.getData()
			},
			getLoadValue(e) {
				this.loading = e
			},
			getTableHeight() {
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await this.$nextTick()
							uni.createSelectorQuery().selectAll('.table').boundingClientRect(
								res => {
									// 获取列表定位
									this.tableHeight = windowHeight - res[0].top
								}).exec()
						})

					}
				})
			},
			async getData() {
				let that = this
				try {
					if (!this.nextRequest) return
					let {
						code,
						data: {
							data: {
								current_page: page,
								total,
								data: tableData
							},
							fieldList: columns
						},
					} = await getUserList(this.url, {
						...this.params,
						date: this.formatParamTime(this.params.date, 'date')
					})
					if (code === 1) {
						this.tableData = [...this.tableData, ...tableData]
						this.params.page = ++page
						const moneySlot = columns.find(o => o.name == 'money')
						moneySlot ? moneySlot.slot = true : null
						this.columns = columns
						this.loading = false
						this.tableData.length >= total && total > 0 ? this.nextRequest = false : null
					}
				} catch (e) {
					this.loading = false
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.customers {
		.time {
			display: flex;

			.date {
				width: 80%;

				::v-deep.u-input {
					background-color: #fff !important;
					border: 0.5px solid #dadbde !important;
				}
			}

			.button {
				flex: 1
			}
		}

		.table {
			background-color: inherit;
		}
	}
</style>